<template>
  <div class="page">
    <div class="page_left">
      <div class="top">
        <i class="el-icon-back" @click="getBack"></i>
      </div>
      <el-row>
        <el-col style="width: 149px">
          <el-menu
            :default-active="activeIndex"
            class="el-menu-vertical-demo"
            background-color="#545c64"
            text-color="#fff"
            active-text-color="#ffd04b"
          >
            <el-menu-item
              :index="item.id"
              v-for="(item, index) in leftList"
              :key="index"
              @click="catLeft(item)"
            >
              <i :class="item.icon"></i>
              <span slot="title">{{ item.name }}</span>
            </el-menu-item>
          </el-menu>
        </el-col>
      </el-row>
    </div>
    <div class="page_right">
      <div
        style="
          margin: 10px;
          width: calc(100% - 20px);
          height: calc(100% - 20px);
          background-color: #fff;
        "
      >
        <router-view />
      </div>
    </div>
  </div>
</template>
<script>
export default {
  data() {
    return {
      activeIndex: "1",
      leftList: [
        {
          id: "1",
          name: "用户管理",
          icon: "el-icon-user",
          pathName: "userManage",
        },
        {
          id: "2",
          name: "文章管理",
          icon: "el-icon-tickets",
          pathName: "articleManage",
        },
        {
          id: "3",
          name: "文章分类",
          icon: "el-icon-tickets",
          pathName: "articleCateManage",
        },
      ],
    };
  },

  methods: {
    catLeft(item) {
      this.$router.push({ name: item.pathName });
    },
    getBack() {
      this.$router.push({ name: "blogHome" });
    },
  },
};
</script>
<style lang="scss" scoped>
.page {
  .page_left {
    height: 100vh;
    width: 149px;
    float: left;
    background-color: #545c64 !important;
    ul,
    li {
      border: none !important;
    }
    .top {
      height: 60px;
      display: flex;
      align-items: center;
      justify-content: center;
      i {
        font-size: 40px;
        margin-left: 10px;
        color: #fff;
        border-radius: 225px;
        border: 1px solid #fff;
        display: flex;
        align-items: center;
        justify-content: center;
      }
    }
  }
  .page_right {
    height: 100vh;
    float: right;
    width: calc(100% - 149px);
    // width: 100%;
    background-color: #efefef;
  }
}
</style>